<template>
	<div class="wrapper">
		<!--header-->
		<header>
			<div class="back"></div>
			<p>在线支付</p>
		</header>

		<!--orderInfo-->
		<h3>订单信息 </h3>
		<div class="orderInfo">
			<p>{{orders.business && orders.business.businessName}}
			<i class="fa fa-caret-down" v-show="!isShowDetail" @click="detailShow"></i>
			<i class="fa fa-caret-up" v-show="isShowDetail" @click="detailShow"></i></p>
			<p>&#165;{{orders.orderTotal}}</p>
		</div>

		<!--orderDetail-->
		<ul class="orderDetail" v-show="isShowDetail">
			<li v-for="item in orders.list">
				<p>{{item.food.foodName}} x {{item.quantity}}</p>
				<p>&#165;{{item.food.foodPrice * item.quantity}}</p>
			</li>
			<li>
				<p>配送费</p>
				<p>&#165;{{orders.business && orders.business.deliveryPrice}}</p>
			</li>
		</ul>
		<!--payway-->
		<ul class="payment-type">
			<li>
				<img src="../assets/alipay.png">
				<i class="fa fa-check-circle"></i>
			</li>
			<li>
				<img src="../assets/wechat.png">
				<!--<i class="fa fa-check-circle"></i>-->
			</li>
		</ul>
		<div class="paymentButton">
			<button @click="pay">确认支付</button>
		</div>

		<!--footer-->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'Payment',
		data() {
			return {
				orderId: this.$route.query.orderId,
				isPaid: false,
				orders: {
					business: {}
				},
				isShowDetail: false,
				totalPrice:0,
				//userId:'',
				pointAgo:0,
			}
		},
		created() {
			//获取订单信息
			this.$axios.post('OrdersController/getOrdersById', this.$qs.stringify({
				orderId: this.orderId
			})).then(response => {
				this.orders = response.data;
				//console.log(this.orders, typeof this.orders);
				//console.log(this.orders.business, typeof this.orders.business);
				this.totalPrice=this.orders.orderTotal;
				//this.userID=this.orders.userId;
				//console.log(this.userID);
				//console.log(this.totalPrice);
			}).catch(error => {
				console.error(error);
			});
			//获取用户积分信息
			this.user = this.$getSessionStorage('user');
			this.$axios.post('PointController/getPointById',this.$qs.stringify({
				userId:this.user.userId
			})).then(response=>{
				this.pointAgo = response.data;
				//console.log(this.pointAgo);
			}).catch(error=>{
				console.error(error);
			});
		},
		mounted() {
			//这里的代码是实现：一旦路由到在线支付组件就不能回到订单确认组件
			//先将当前路由添加到history对象中
			history.pushState(null, null, document.URL);
			//popstate事件能够监听history对象的变化
			window.onpopstate = () => {
				this.$router.push({
					path: '/index'
				});
			}
		},
		destroyed() {
			window.onpopstate = null;
		},
		methods: {
			//支付
			pay() {
				if (!confirm('确认支付吗？')) {
					return;
				}
				this.$axios.post('OrdersController/finishOrder', this.$qs.stringify(
					 this.orders
				)).then(response => {
					this.isPaid = response.data;
					if (!this.isPaid) {
						alert('支付失败！');

					} 
				}).catch(error => {
					console.error(error);
				});
				alert('支付成功！');
				this.setPoints();
				this.$router.push({
						path: '/index'
					});
			},
			//显示订单明细
			detailShow() {
				this.isShowDetail = !this.isShowDetail;
			},
			//根据消费更新积分
			setPoints(){
				let newPoint=this.pointAgo+this.totalPrice;
				newPoint -= newPoint%1;
				let temp=newPoint-this.pointAgo;
				console.log(newPoint);
				this.$axios.post('PointController/updateUserPoint', this.$qs.stringify({
					userId:this.user.userId,point:newPoint}
				)).then(response => {
					if (response.data > 0) {
						alert('您获得了'+temp+'个积分');
						//this.$router.go(-1);
					} else {
						alert('积分更新失败！');
					}
				}).catch(error => {
					console.error(error);
				});
			}
		},
		components: {
			Footer
		}
	}
</script>

<style scoped>
	/****************总容器*********************/

	.wrapper {
		width: 100%;
		height: 100%;

	}

	/****************header*********************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wrapper header .back {
		position: absolute;
		width: 2vw;
		height: 2vw;
		left: 1.5vw;
		top: 2.8vw;
		user-select: none;
		cursor: pointer;
	}

	/*****************orderInfo*******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 0;

		font-size: 4vw;
		font-weight: 300;
		color: #999999;
	}

	.wrapper .orderInfo {
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		color: #666666;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .orderInfo p:last-child {
		color: orangered;
	}

	/*orderDetail*/
	.wrapper .orderDetail {
		width: 100%;
	}

	.wrapper .orderDetail li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .orderDetail li p {
		font-size: 3vw;
		color: #666666;
	}

	/*payway*/
	.wrapper .payment-type {
		width: 100%;
	}

	.wrapper .payment-type li {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .payment-type li img {
		width: 33vw;
		height: 8.9vw;
	}

	.wrapper .payment-type li .fa-check-circle {
		font-size: 5vw;
		color: #38CA73;
	}

	.wrapper .paymentButton {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
	}

	.wrapper .paymentButton button {
		width: 100%;
		height: 10vw;
		border: none;
		/*外轮廓线*/
		outline: none;
		background-color: #38CA73;
		border-radius: 4px;
		color: #FFFFFF;
	}
</style>
